<template>
  <div class="big-box">
    <div class="g-nav">
      <div style="margin-left: 25%;float: left;">
        <img style="position: relative;top: 15px;" src="../assets/images/logo.svg" />
      </div>
      <div style="float: left;margin-left: 15%;margin-top: 40px;">
        <ul>
          <li><a class="nav-item" href="javascript:" @click="go(0)">首页</a></li>
          <li><a class="nav-item" href="javascript:" @click="go(1)">公告</a></li>
          <li><a class="nav-item" href="javascript:" @click="go(2)">案例</a></li>
          <li><a class="nav-item" href="javascript:" @click="go(3)">体验</a></li>
          <li><a class="nav-item" href="javascript:" @click="go(4)">关于</a></li>
          <li><a class="nav-item" href="javascript:" @click="go(5)">登录</a></li>
        </ul>
      </div>
    </div>
    <div class="g-main">
      <div id="first" class="test">
        <div class="lunbo-3" style="height: 100%;position: absolute;display: none;">
          <img width="100%" height="100%" src="../assets/images/bg2a.jpg" />
          <img
            class="lunbo-3-text"
            style="width:600px;position: relative;bottom: 70%;left: 35%;"
            src="../assets/images/yongbao.png" />
        </div>
        <div class="lunbo-2" style="height: 100%;position: absolute;display: none;">
          <img width="100%" height="100%" src="../assets/images/bg3a.jpg" />
          <img
            class="lunbo-2-text"
            style="width:600px;position: relative;bottom: 70%;left: 35%;"
            src="../assets/images/fendou.png" />
        </div>
        <div class="lunbo-1" style="height: 100%;position: absolute;">
          <img width="100%" height="100%" src="../assets/images/bg1a.jpg" />
          <img
            class="lunbo-1-text"
            style="width:690px;position: relative;bottom: 75%;left: 35%;"
            src="../assets/images/sentence.png" />
        </div>
      </div>
      <div class="test">
        <img style="position: absolute;top: 0; z-index: -1;" width="100%" height="100%" src="../assets/images/bg2.jpg" />
        <div class="center-box">
          <div class="news-box">
            <div style="margin: 0 0 92px 122px;"><img src="../assets/images/news.png" /></div>
            <div style="display: flex;justify-content: space-between;height: 400px;">
              <div class="news" v-for="(item,index) in data" :key="index">
                <div>
                  <div class="news-logo"><img style="mar" src="../assets/images/news_logo.svg" /></div>
                  <div class="news-date">
                    <div 
                      style="color: rgba(250, 140, 20, 1);font-size: 50px;line-height: 50px;"
                      >{{day}}</div>
                    <div
                      style="color: rgba(140, 140, 140, 1);font-size: 10px;text-indent: 5px;"
                      >{{yearAndMoth}}</div>
                  </div>
                </div>
                <div class="news-first-head">{{item.first}}</div>
                <div class="news-second-head">{{item.second}}</div>
                <div class="news-img">
                  <el-image
                    fit="cover"
                    style="width: 100%;height: 100%;"
                    :src="item.img"
                  ></el-image>
                  <img  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="test">
        <img style="position: absolute;top: 0; z-index: -1;" width="100%" height="100%" src="../assets/images/bg3.jpg" />
        <div class="center-box">
          <div class="cases-box">
            <div style="margin: 0 0 14px 25px;"><img src="../assets/images/cases.png" /></div>
            <div style="height: 600px;">
              <div class="case" v-for="(item,index) in test" :key="index">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="test">
        <img style="position: absolute;top: 0; z-index: -1;" width="100%" height="100%" src="../assets/images/bg4.jpg" />

        <div class="center-box">
          <div class="taste-box">
            <div style="position: relative;width: 276px;float: right;"><img src="../assets/images/taste.png" /></div>
            <div class="code">
              <div style="width: 166px;height: 166px;">
                <img 
                  style="margin-top: 30px;margin-left: 40px;width: 100%;" 
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng911bbc15d5cad8853867c4f9dcdf5f7cc954902158fbbb5d05e6cd05fbb99c0e" />
              </div>
              <div class="code-text">
                扫描二维码下载APP体验
              </div>
            </div>
              
          </div>
        </div>
      </div>
      <div class="test">
        <img style="position: absolute;top: 0; z-index: -1;" width="100%" height="100%" src="../assets/images/bg4a.jpg" />
        <div class="center-box">
          <div class="about-box">
            <div style="float: right;margin-bottom: 100px;"><img src="../assets/images/aboutt.png" /></div>
            <div style="height: 480px;width:100%;display: flex;justify-content: space-between;">
              <div class="about-info"></div>
              <div class="about-info"></div>
              <div class="about-info"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="test" style="background-color: rgba(250, 140, 20, 1)">
        <div class="center-box">
          <div class="login-box">
            <div style="margin-bottom: 88px;">
              <img src="../assets/images/login.png" />
            </div>
            <div class="login">
              <div class="login-info">
                <div class="login-head">用户登录</div>
                <div style="height: 38px;border-bottom: 1px solid rgba(250, 140, 20, 1);">
                  <div class="phone">
                        <el-select v-model="phoneHead" filterable placeholder="请选择" style="border: none!important;">
                          <el-option
                            v-for="item in phoneNums"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                  </div>
                  <div class="phone-input">
                    <input type="tel" v-model="user.phone" placeholder="请输入手机号" />
                  </div>
                </div>
                <div 
                  class="check-message">
                  <div
                    style="width: 340px;height: 40px;"
                    >
                    <input 
                      id="code"
                      v-model="user.message"
                      style="height: 100%;width: 100%;"
                      type="text"
                      placeholder="请输入验证码"
                      />
                  </div>
                  <div style="line-height: 40px;">
                    <span 
                      @click="getMessage" 
                      v-if="user.messageCount == 0"
                      style="color: rgba(250, 140, 20, 1);cursor: pointer;"
                      >获取验证码</span>
                    <span
                      v-if="user.messageCount > 0"
                      style="font-size: 12px;"
                      >{{user.messageCount}}秒后重新获取</span>
                  </div>
                </div>
                <div style="margin-top: 50px;">
                  <el-button
                    class="login-btn"
                    style="background-color: rgba(250,140,20,1);color: white;"
                    @click="login"
                  >登录</el-button>
                </div>
                <div style="text-align: center;font-size: 12px;margin-top: 15px;">
                  <el-radio v-model="radio" label="1">&nbsp;
                  </el-radio>
                    <span style="color: rgba(140, 140, 140, 1);">已仔细阅读并同意</span>
                    <span class="sc">《用户协议》</span>
                    <span class="sc">《隐私政策》</span>
                </div>
              </div>
              <div class="right-code">
                <div>
                  <img src="../assets/images/right_code.svg" />
                </div>
                <div class="camera">
                  APP扫码登录
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const data = [
    {
      first:"两周5标8亿!",
      second:"康洁科技集团冲上虎年榜首.",
      img:"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng32adad63709905959c1a743fba932688541440a2e758fe0a27c2746978421a48"
    },
    {
      first:"两周5标8亿!",
      second:"康洁科技集团冲上虎年榜首.",
      img:"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng32adad63709905959c1a743fba932688541440a2e758fe0a27c2746978421a48"
    },
    {
      first:"两周5标8亿!",
      second:"康洁科技集团冲上虎年榜首.",
      img:"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng32adad63709905959c1a743fba932688541440a2e758fe0a27c2746978421a48"
    },
    {
      first:"两周5标8亿!",
      second:"康洁科技集团冲上虎年榜首.",
      img:"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng32adad63709905959c1a743fba932688541440a2e758fe0a27c2746978421a48"
    },
    
  ]
  const phoneNums = [
    '+86',
  ]
  import $ from 'jquery'
  import {getCheckMessage,userLogin} from '@/api/global'
  import {setCookie} from '@/utils/cookie'
  export default {
    data() {
      return {
        radio:'0',
        nowPage:0,
        move:true,
        lastHeight:0,
        day:0,
        yearAndMoth:"",
        data:data,
        test:[1,2,3,4,5,6,7,8],
        phoneHead:"+86",
        phoneNums:phoneNums,
        user:{
          phone:'',
          message:'',
          messageCount:0
        }
      }
    },
    created() {
      this.getDate()
    },
    mounted() {
      this.listen();
      let page = this.$route.query.page;
      if(page >= 0 && page <= 5) {
        // console.log(page)
        this.go(page);
      }else {
        // console.log(1)
        this.go(0);
      }
      var that = this;
      window.addEventListener('resize',function(){
        // console.log(1)
        that.goto();
      })
    },
    methods:{
      getDate:function(){
        var date = new Date();
        this.day = date.getDate();
        this.yearAndMoth = date.getFullYear() + "-" + date.getMonth();
      },
      go:function(index){
        var that = this;
        //防止重复点击或者重复点击bug或者快速滚动bug
        if(that.move){
          that.$router.push({path:'/huanwei',query:{page:index}});
          that.move = false;
          setTimeout(function(){
            that.move = true
          },800);
          that.goto(index)
        }
      },
      goto:function(index){
        //翻页
        var obj = $('.test');
        var top = obj[0].offsetTop;
        this.nowPage = - top / this.lastHeight;
        // console.log(typeof index)
        if(typeof index == 'undefined'){
          // console.log(11212)
          var len = window.innerHeight - this.lastHeight;
          $('.g-main').css('height',window.innerHeight);
          this.reset(len);
          return;
        }
        //导航栏选中当前显示页面
        $('.nav-item').css('color','rgb(51,51,51)');
        $('.nav-item')[index].style.color = 'rgb(250,140,20)';
        var sum = Math.abs(index - this.nowPage);
        if(index > this.nowPage){
          this.nextPage(sum,index);
        }else if(index < this.nowPage){
          this.prevPage(sum,index)
        }
      },
      prevPage:function(sum){
        //往上快速翻页
        var objs = $('.test');
        $.each(objs,function(){
          // console.log(this)
          $(this).css('top',this.offsetTop + sum * window.innerHeight + 'px');
        })
      },
      nextPage:function(sum){
        //往下快速翻页
        var objs = $('.test');
        $.each(objs,function(){
          $(this).css('top',this.offsetTop - sum * window.innerHeight + 'px');
        })
      },
      reset:function(len){
        //重新调整页面大小
        var objs = $('.test');
          // if(len < 0){
          for(var i = 0;i < 6;i ++){
            if(i < this.nowPage){
              objs[i].style.top = objs[i].offsetTop - len * (this.nowPage - i) + 'px';
              objs[i].style.height = objs[i].offsetHeight + len + 'px';
            }else if(i == this.nowPage){
              objs[i].style.height = objs[i].offsetHeight + len + 'px';
            }else {
              objs[i].style.top = objs[i].offsetTop - len * (this.nowPage - i) + 'px';
              objs[i].style.height = objs[i].offsetHeight + len + 'px';
            }
          }
          this.lastHeight = window.innerHeight;
          $('.big-box').css('height',this.lastHeight + "px");
        // }
      },
      setHeight:function(){
          var height = window.innerHeight;
          $('.g-main').css('height',height + 'px')
          $('.test').css('height',height + 'px')
          var index = 1;
          $.each($('.test'),function(){
            // console.log(index)
            if($(this).attr('id') == 'first') {
              $(this).css('top','0');
            }else {
              $(this).css('top',height * index + 'px');
              index ++;
            }
          });
          this.lastHeight = height;
      },
      listen:function(){
        this.setHeight();
        setTimeout(()=>{$('.test').css('transition','all 0.8s ease-out');},100);
        var that = this;
        var objs = $('.test');
        //兼听鼠标滚动事件
        $('.test').bind('mousewheel DOMMouseScroll',function(event){ //on也可以 bind监听
          
            //Chorme
            var wheel = event.originalEvent.wheelDelta;
            var detal = event.originalEvent.detail;
            if (event.originalEvent.wheelDelta && that.move) { //判断浏览器IE,谷歌滚轮事件  
              if (wheel > 0) { //当滑轮向上滚动时  
                $('.g-nav').css('top','0px');
                if(objs[0].offsetTop != 0){
                  that.go(that.$route.query.page - 1);
                }
              }  
              if (wheel < 0) { //当滑轮向下滚动时  
                if($(this).next().length == 0) {
                  return;
                }
                //下滚隐藏导航栏
                $('.g-nav').css('top','-80px');
                if(objs[5].offsetTop != 0){
                  that.go(Number(that.$route.query.page) + 1);
                }
              }  
          } else if (event.originalEvent.detail && that.move) {  //Firefox滚轮事件  
              if (detal > 0) { //当滑轮向下滚动时  
                if($(this).next().length == 0) {
                  return;
                }
                //下滚隐藏导航栏
                $('.g-nav').css('top','-80px');
                if(objs[5].offsetTop != 0){
                  that.goto(Number(that.$route.query.page) + 1);
                }
              }  
              if (detal < 0) { //当滑轮向上滚动时  
                //上滚显示导航栏
                $('.g-nav').css('top','0px');
                if(objs[0].offsetTop != 0){
                  that.goto(that.$route.query.page - 1);
                }
              }  
          }  
        });
        //鼠标移动显示导航栏
        $('.g-main').mousemove(function(){
          $('.g-nav').css('top','0px');
        })
        //首页轮播
        setTimeout(function(){
          $('.lunbo-2').fadeToggle(1500);
          $('.lunbo-2-text').animate({bottom:"75%"},2000)
        },8000);
        setTimeout(function(){
          $('.lunbo-3').fadeToggle(1500);
          $('.lunbo-3-text').animate({bottom:"75%"},2000)
        },16000);
        //三个页面交替出现
        var next = 1;
        setInterval(function(){
          $('.lunbo-' + next).fadeToggle(2000);
          $('.lunbo-' + next + '-text').animate({bottom:"70%"},2000)
          setTimeout(function(){
          $('.lunbo-' + next + '-text').animate({bottom:"75%"},2000)
            $('.lunbo-' + next).fadeToggle(1500);
          },16000);
          next ++;
          if(next > 3) next = 1;
        },8000);
        //导航栏，鼠标悬浮变颜色
        $('.nav-item').mouseover(function(){
          $('.nav-item').css('color','rgb(51,51,51)');
          $(this).css('color','rgb(250,140,20)');
        })        
        $('.nav-item').mouseout(function(){
          $('.nav-item').css('color','rgb(51,51,51)');
          $('.nav-item')[that.$route.query.page].style.color = 'rgb(250,140,20)';
        })
        
        $('#code')[0].addEventListener('keypress',function(e){
          if(e.keyCode == 13){
            that.login();
          }
        })
      },
      getMessage:function(){//获取验证码
        var that = this;
        if(that.user.phone.length == 0){
          that.$message({
            message:'手机不能为空',
            type:'error',
            showClose:true,
            offset:100
          })
          return;
        }else if(that.radio == 0){
          that.$message({
            message:'请先勾选用户协议',
            type:'error',
            showClose:true,
            offset:100
          })
          return;
        }
        getCheckMessage({mobile:that.user.phone}).then(response => {
          var _data = response.data;
          if(_data.status == 200){
            that.$message({
              message:"发送成功",
              showClose:true,
              offset:100
            })
            that.user.messageCount = 180;
            var count = setInterval(function(){
              --that.user.messageCount;
              if(that.user.messageCount == 0){
                clearInterval(count);
              }
            },1000)
          }
        }).catch(error =>{
          that.$message({
            message:"请求错误",
            showClose:true,
            offset:100
          })
          console.log(error)
        })
      },
      login:function(){
        var that = this;
        if(that.user.phone.length == 0 || that.user.message.length == 0){
          that.$message({
            message:'手机或验证码不能为空',
            type:'error',
            showClose:true,
            offset:100
          })
          return;
        }else if(that.radio == 0){
          that.$message({
            message:'请先勾选用户协议',
            type:'error',
            showClose:true,
            offset:100
          })
          return;
        }
        userLogin({phone:that.user.phone,code:that.user.message}).then(response => {
          var _data = response.data;
        // console.log(_data)
          if(_data.status == 200){
            setCookie('token',_data.data,7200);
            that.$router.push({path:'/main'})
          }else {
            that.$message({
              message:_data.message,
              type:'error',
              showClose:true,
              offset:100
            })
          }
        }).catch(error => {
          that.$message({
            message:'发生错误',
            type:'error',
            showClose:true,
            offset:100
          })
          console.log(error)
        })
      }
    }
  }
</script>

<style lang="css" scoped>

  .big-box {
    overflow: hidden;
  }
  .g-main{
    position: absolute;
    top: 0px;
    width: 100%;
    overflow: hidden;
    transition: all 0.8s ease-out;
    -webkit-transition: all 0.8s ease-out;
  }
  .test {
    position: absolute;
    top: 0px;
    width: 100%;
    overflow: hidden;
  }
  .g-nav {
    z-index: 999999999;
    position: absolute;
    height: 80px;
    width: 100%;
    top: 0px;
    background-color: white;
    transition: all 0.5s linear 0.1s;
    -webkit-transition: all 0.5s linear 0.1s;
  }

  .g-nav ul {
    list-style-type: none;
    position: relative;
    height: 21px;
  }
  .g-nav ul li {
    float: left;
    width: 92px;
    text-align: center;
  }
  .g-nav ul li a{
    color: rgba(51, 51, 51, 1);
    size: 16px;
    display: inline;
  }
  .body-2-info {
    width: 52%;
    height: 100%;
    position: relative;
    bottom: 100%;
    left: 24%;
  }
  .over-show {
    display: inline-block;
    width: 25%;
    height: 100%;
    cursor:pointer;
    color: white;
  }
  .color-block {
    position: absolute;
    bottom: 0;
    width: 25%;
    height:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s; /* Safari */
  }
  .center-box{
    width: 1000px;
    margin: 0 auto;
    height: 100%;
  }
  .news-box {
    width: 100%;
    margin-top: 200px;
    height: 615px;
  }
  .news {
    background-color: white;
    width: 220px;
    padding: 12px 10px;
    height: 400px;
  }
  .news-logo{
    float: left;
  }
  .news-date{
    float: right;
  }
  .news-first-head {
    font-size: 25px;
    font-family: PingFangSC-Semibold;
    margin-top: 110px;
    width: 100%;
    white-space: nowrap;
    font-weight: 550;
  }
  .news-second-head{
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    margin-top: 10px;
    font-weight: 550;
    width: 100%;
    height: 60px;
  }
  .news-img{
    width: 100%;
    height: 120px;
    margin-top: 50px;
  }
  .cases-box{
    width: 100%;
    margin-top: 200px;
    height: 615px;
  }
  .case{
    background-color: white;
    width: 200px;
    height: 250px;
    margin: 25px;
    float: left;
  }
  .taste-box{
    width: 100%;
    margin-top: 260px;
    height: 600px;
  }
  .code{
    width: 250px;
    height: 250px;
    background-color: white;
    position: relative;
    margin: 0 auto;
    top: 155px;
  }
  .code-text{
    color: rgba(250, 140, 20, 1);
    font-size: 16px;
    font-family: PingFangSC-Thin;
    text-align: center;
    margin-top: 50px;
  }
  .about-box{
    width: 100%;
    margin-top: 200px;
    height: 720px;
  }
  .about-info{
    width: 300px;
    height: 480px;
    background-color: white;
  }
  .login-box{
    width: 100%;
    margin-top: 200px;
    height: 650px;
  }
  .login{
    margin: 0 auto;
    background-color: white;
    width: 600px;
    height: 400px;
    border-radius: 8px;
    
  }
  .login-info{
    margin: 0 76px;
    position: relative;
    top: 27px;
  }
  .login-head{
    font-size: 24px;
    font-weight: Regular;
    text-align: center;
    font-family: PingFangSC-Regular;
    padding-bottom: 40px;
  }
  .phone{
    cursor: pointer;
    float: left;
    width: 95px;
    height: 40px;
    text-align: center;
    position: relative;
    top: -6px;
  }
  .phone-input {
    float: left;
    width: 350px;
    height: 30px;
    border-left: 2px solid rgba(250, 140, 20, 1);
  }
  .phone-input>input{
    width: 100%;
    height: 100%;
    border: none;
    outline: medium;
    font-size: 18px;
    font-family: PingFangSC-Regular;
    text-indent: 47px;
  }
  .check-message{
    font-size: 18px;
    height: 40px;
    border-bottom: 1px solid rgba(250, 140, 20, 1);
    margin-top: 25px;
  }
  .check-message div{
    float: left;
  }
  .check-message input {
    width: 100%;
    height: 100%;
    border: none;
    outline: medium;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    text-indent: 15px;
  }
  .login-btn{
    font-size: 24px;
    width: 100%;
    letter-spacing: 30px;
    text-indent: 35px;
  }
  .sc{
    color: rgba(250, 140, 20, 1);
    cursor: pointer;
  }
  .camera{
    display: inline;
    position: relative;
    bottom: 108px;
    font-size: 12px;
    color: white;
    left: 25px;
  }
  .right-code{
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    left: 490px;
    bottom: 300px;
    cursor: pointer;
  }
  
</style>
